//经费到款 
<template>
  <div class="flex-1 flex-ver">
    <div class="mb8">
      <search>
        <el-form label-width='80px' inline autocomplete="off"  :model="pageparm" class="search_box">
          <el-form-item label="日期">
            <el-date-picker
                size="medium"
                v-model="pageparm.receive_time"
                type="date"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                placeholder="请选择到款日期搜索"
                @change="searchChane($event,'receive_time')">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="来款单位">
            <el-input v-model.trim="pageparm.from_unit" placeholder="请输入来款单位名称搜索" clearable />
          </el-form-item>
        </el-form>
        <template slot="footer">
          <el-button class="mr8" size="medium" type="primary" @click="handle(null,{},3)">新增经费到款</el-button>
          <exportExcel :apiFn="Apifundsclaim" name='经费到款' :self="true" :dataFn='dataFn' />
        </template>
      </search>
    </div>
    <el-table
      :data="tableData"
      class="flex-1"
      height="100%" size="medium" 
      border 
      highlight-current-row
      v-loading="tableLoading"
      stripe
      @sort-change="tableSortChange">  
      <el-table-column
        align="center"
        v-for="(item,i) in headerList"
        :key="item.prop"
        :prop="item.prop"
        :label="item.label + (item.unit || '')"
        :min-width="item.width"
        :fixed="i === 0 ? true: false"
        show-overflow-tooltip
        sortable="custom">
        <template slot-scope="scope">
          <template v-if="item.prop === 'status'">
            {{ scope.row.status === 1 ? '已认领' :'未认领' }}
          </template>
          <template v-else>
           {{ scope.row[item.prop] }}
          </template>
        </template>
      </el-table-column>
      <el-table-column fixed="right" align="center" label="操作" width="140">
        <div class="flex-justify-end" slot-scope="scope" v-if="scope.row.status === 0">
          <el-tooltip  effect="dark" content="认领" placement="bottom-end" >
            <el-button size="small" type="primary"  @click="claim(scope.row)" icon="el-icon-circle-check" circle></el-button>
          </el-tooltip>
          <el-tooltip  effect="dark" content="修改信息" placement="bottom-end">
            <el-button size="small"  @click="handle(scope.$index, scope.row,2)" icon="el-icon-edit" circle></el-button>
          </el-tooltip>
          <el-tooltip  effect="dark" content="删除" placement="bottom-end">
            <el-button size="small" type="danger" @click="deleteUser(scope.$index, scope.row)" icon="el-icon-delete" circle></el-button>
          </el-tooltip>
        </div>
      </el-table-column>
    </el-table>

    <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>

    <el-dialog :visible.sync="editFormVisible" width="400px" 
    :close-on-click-modal='false'
    :close-on-press-escape='false'>
      <h2 slot="title" class="tx-c">{{dialogTitle}}</h2>
      <el-form autocomplete="off"  label-width="100px" :model="editForm" class="form_flex">
        <el-form-item
          v-for="(v, i) in editHeaderList"
          :key="i"
          :label="v.label"
          :class="v.required ? 'tip' : ''">
          <el-date-picker
            v-if="v.prop === 'receive_time'"
            size="medium"
            v-model="editForm[v.prop]"
            type="date"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            placeholder="选择日期时间">
          </el-date-picker>
          <el-input
            v-else
            size="medium"
            :type="v.type"
            autosize
            clearable
            v-model="editForm[v.prop]"
            @mousewheel.native.prevent
            :placeholder="'请输入' + v.label">
              <template v-if="showUnit(v.prop)" slot="append">万元</template>
          </el-input>
        </el-form-item>
      </el-form> 
      <div slot="footer" class="flex-justify-bcenter">
        <el-button @click="editFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit" :loading='btnLoading'>确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="claimObjVisible" width="400px" @click="claimObjVisible = false" @close='dialogClose'
    :close-on-click-modal='false'
    :close-on-press-escape='false'>
      <h2 slot="title" class="tx-c">经费认领</h2>
      <el-form autocomplete="off"  label-width="110px" class="form_flex form1">
        <el-form-item label="项目类型" class="tip">
          <div class="radio_block">
            <el-radio-group v-model="claimObj.project_type" @change="typeChange" size="mini">
                <el-radio-button :label="1">纵向项目</el-radio-button>
                <el-radio-button :label="2">横向项目</el-radio-button>
                <el-radio-button :label="3">国际合作</el-radio-button>
            </el-radio-group>
          </div>
        </el-form-item>
        <el-form-item class="tip" label="项目名称" v-show="claimObj.project_type">
          <inputSearch type='projects' ref="inputSearch"  v-if="claimObj.project_type === 1" @onChange="choseProjectId" />
          <inputSearch type='contracts' ref="inputSearch"  v-else-if="claimObj.project_type === 2" @onChange="choseProjectId" />
          <inputSearch type='guoJi' ref="inputSearch"  v-else-if="claimObj.project_type === 3" @onChange="choseProjectId" />
        </el-form-item>
        <el-form-item
          v-for="(v, i) in editClaimList"
          :key="i"
          :label="v.label"
          :class="v.required ? 'tip' : ''">
          <!-- <inputSearch v-if="v.prop === 'claim_employees_id'" ref="employees" @onChange="choseId" /> -->
          <el-date-picker
            v-if="v.prop === 'claim_date'"
            size="medium"
            v-model="claimObj[v.prop]"
            type="date"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            placeholder="选择日期时间">
          </el-date-picker>
          <el-input
            v-else-if="v.prop === 'amount'"
            size="medium"
            type="number"
            clearable
            v-model="claimObj[v.prop]"
            @mousewheel.native.prevent
            :placeholder="'请输入' + v.label"
            @input="compare">
              <template slot="append">万元</template>
            </el-input>
          <el-input
            v-else
            size="medium"
            :type="v.type"
            autosize
            clearable
            v-model="claimObj[v.prop]"
            @mousewheel.native.prevent
            :placeholder="'请输入' + v.label"/>
        </el-form-item>
      </el-form> 
      <div slot="footer" class="flex-justify-bcenter">
        <el-button @click="claimObjVisible = false">取 消</el-button>
        <el-button type="primary" @click="claimSubmit" :loading='btnLoading'>确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>

import {
    Apifundsclaim,
    ApifundsclaimAdd,
    ApifundsclaimPut,
    ApifundsclaimDel,
    ApifundsclaimClaim
} from '@/api'
import {reviewStatus} from "@/assets/js"
import { debounce } from "@/utils/index";
import {headerList} from '../js/received'
import {headerList as claimList } from '../js/claim'
export default {
  computed:{
      editHeaderList(){
        return headerList.filter(item => item.prop !== 'status')
      },
      editClaimList(){
        return claimList.filter(item => item.prop !== 'project_name' && item.prop !== 'claim_employees_id')
      }
  },
  data(){
    return{
      Apifundsclaim,
      reviewStatus,
      tableData:[], 
      editFormVisible: false, 
      editForm: {},  //修改或者查看详情

      pageparm: {
        page: 1,
        perPage: 20,
        total: null,
        sort_str: null, 
        sort_order: 'desc' ,
      },
      tableLoading: false,

      btnLoading: false,

      headerList,
      rules:['receive_time','from_unit','receive_amount','receive_balance'],
      unitList:['receive_amount','receive_balance'],
      rules2:['project_id','claim_date','amount',],
      departmentsId:null,
      examine_id: null,  //审核id

      middleList:[],


      claimList, //认领
      claimObj:{

      },
      claimObjVisible: false,
      dialogTitle:'',
    }
  },
  mounted(){
    this.getList()
  },
  methods:{
    showUnit(prop){
      return this.unitList.includes(prop)
    },
    dataFn(data,tableHeade){
      let tabStr = ''
      data.forEach((item, index) => {
          let tabRowStr = "";
          tabStr += `<tr>`;
          for (let i = 0; i < tableHeade.length; i++ ) {
              const key = tableHeade[i]
              if (key === 'status') {
                  tabRowStr += `<td>${item.status === 1 ? '已认领' :'未认领'}</td>`;
              }else {
                tabRowStr += `<td>${item[key] || ''}</td>`;
              }
          }
          tabStr += tabRowStr;
          tabStr += "</tr>";
      });
      return tabStr
    },
    compare(num){
        if(num > Number(this.claimObj.receive_balance)){
            this.claimObj.amount = Number(this.claimObj.receive_balance)
            this.$message.error('认领金额不得大于到款余额');
        }
    },
    claimSubmit(){
        const options = this.claimObj
        for (const key of this.rules2) {
            if(!options[key] && options[key] !== 0){
            this.$message({
                type: 'error',
                message: '必填信息请填写完整！'
            });
            return
            }
        }
        if(Number(options.amount) > Number(options.receive_balance)){
            this.$message.error('认领金额不得大于到款余额');
            return
        }
        this.btnLoading = true
        ApifundsclaimClaim(options,options.funds_claims_id).then(res => {
            this.btnLoading = false
            this.$message.success('认领成功')
            this.claimObjVisible = false
            this.getList()
        }).catch(()=>{
            this.btnLoading = false
            this.$message.error('认领失败')
        })
    },
    typeChange(i){
        this.$refs.inputSearch.clear()
        this.claimObj.project_id = null
    },
    claim(val){
        this.claimObj = {
            funds_claims_id: val.id,
            receive_balance: val.receive_balance
        }
        this.claimObjVisible = true
    },
    choseProjectId(id){
        this.claimObj.project_id = id
    },
    choseId(id){
        this.claimObj.claim_employees_id = id
    },
    tableSortChange(column){
      if (column.order === "descending") {
        this.pageparm.sort_str = column.prop;
        this.pageparm.sort_order = "desc";
      } else if (column.order === "ascending") {
        this.pageparm.sort_str = column.prop;
        this.pageparm.sort_order = "asc";
      }else{
        this.pageparm.sort_str = null;
        this.pageparm.sort_order = null;
      }
      this.getList()
    },
    //搜索
    searchChane(i,val){
      this.pageparm[val] = i
      this.pageparm.page = 1
      this.getList()
    },
    //分页
    callFather(pageparm){
      this.pageparm.page = pageparm.page
      this.pageparm.perPage = pageparm.perPage
      this.getList()
    },
    getList(){
      this.tableLoading = true
      Apifundsclaim(this.pageparm).then(({data,page}) => {
        this.tableData = data || []
        this.pageparm.total = page.total
        this.tableLoading = false
      }).catch(()=>{
        this.tableLoading = false
      })
    },
    handle(index,value,i){
      this.editForm = {...value}
      this.editFormVisible = true
      this.dialogTitle = '新增经费到款'
      if(i == 2){
        this.dialogTitle = '编辑经费到款'
        delete this.editForm.department
        delete this.editForm.review
      }
    },
    dialogClose(){
        // this.$refs.employees[0].clear()
    },
    deleteUser(index,value){
      this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const loading = this.$loading({
            lock: true,
            text: '加载中...',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          });
          ApifundsclaimDel(value.id).then(res => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.getList()
          }).finally(()=>{
            loading.close()
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
    submit : debounce(function(){   //提交  修改或新增
      const options = this.editForm
      for (const key of this.rules) {
        if(!options[key] && options[key] !== 0){
          this.$message({
            type: 'error',
            message: '必填信息请填写完整！'
          });
          return
        }
      }
      this.btnLoading = true
      options.departments_id = this.$store.state.userInfo.department_id
      if(options.id){   //有ID就是修改
        ApifundsclaimPut(options,options.id).then(res => {
          this.$message({
            type: 'success',
            message: '修改成功!'
          });
          this.editFormVisible = false
          this.getList()
        }).catch(()=>{
          this.$message({
            type: 'error',
            message: '修改失败!'
          });
        }).finally(()=>{
            this.btnLoading = false
        });
      }else{
        ApifundsclaimAdd(options).then(res => {
          this.$message({
            type: 'success',
            message: '添加成功!'
          });
          this.editFormVisible = false
          this.getList()
        }).catch(()=>{
          this.$message({
            type: 'error',
            message: '添加失败!'
          });
        }).finally(()=>{
            this.btnLoading = false
        });
      }
    },800,true)
  },

}
</script>
<style lang='less' scoped>
.form1{
    .radio_block{
      /deep/.el-radio-button--mini .el-radio-button__inner{
        font-size: 14px;
        padding: 7px 8px;
      }
    }
}


</style>